﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        function goNewPage(url, name) {
            //var item = self.parent.frames["mainFrame"].id;
            //var item = self.parent.parent.frames["mainFrame"].name;
            //alert(item);
            self.parent.parent.frames["mainFrame"].addTab(url, name);
        }
        function showNotice(){
            $("#Modal-Notice").modal("show");
        }
        $(function () {
            $("#Modal-Notice").modal("show");
            $("#Modal-Notice").on("hide.bs.modal", function () {
                $(".mynotic").tooltip('show');
                setTimeout(closeTooltip, 3000);
            });
        });
        //tooltip的定时关闭，在对话框关闭后触发
        function closeTooltip() {
            $(".mynotic").tooltip('hide');
        }
        //页面是否有滚动条
        function isScroll() { return true; };
        //防止页面抖动
        $(function () {
            $(".fade").on("hide.bs.modal", function (e) {
                if (isScroll) {
                    $("body").addClass("myModal-open");
                }
            });
            $("body").addClass("myModal-open");
        });
    </script>
    <style type="text/css">
        a{
            text-decoration:none;
            color:white;
        }
        .panel-title:hover{
            cursor:pointer;
        }
        .icon-div {
            width: 152px;
            height: 90px;
            float: left;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .icon{
            font-size:45px;
            color:white;
            display:block;
            margin:0 auto;
        }
        .font {
            color: #44576B;
            position: relative;
            top: 12%;
            font-size:20px;
        }
        .font-div {
            width: 200px;
            height: 90px;
            float: left;
            background-color: #F2F2F2;
        }
        .div-unit {
            cursor:pointer;
            opacity:1;
        }
        .div-unit:hover .icon{
            /*以动画形式调用*/
            animation:rotating 0.5s 1;
            -webkit-animation:rotating 0.5s 1;
            -moz-animation:rotating 0.5s 1;
        }
        .mynotic {
            font-size: 15px;
            background-color: #F7B824;
        }
        .mynotic:hover{
            cursor:pointer;
        }
        .mynotic:hover .glyphicon-volume-up{
            animation:rotating 0.5s 1;
            -webkit-animation:rotating 0.5s 1;
            -moz-animation:rotating 0.5s 1;
        }
        /*定义旋转动画帧*/
        @@keyframes rotating{
             from{
                 transform:rotate(0deg);
             }
             to{
                 transform:rotate(360deg);
             }
        }
        .div-unit:hover .font-div{
            opacity:0.7;
        }
        .tooltip-arrow{
            background-color:black;
        }
        .tooltip-inner{
            background-color:black;
            color:white;
        }
        .mybtn:hover{
            background-color:#009688;
            color:white;
        }
        .myModal-open {
            /*overflow-y:scroll;*/
            padding-right: 0 !important;
        }
    </style>
</head>
<body style="overflow-y:auto;">
   <div style="padding-top:3px;padding-left:3px;">
       <div class="alert alert-info alert-dismissible fade in " role="alert">
           <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <strong>温馨提示：</strong> 您可以在:基础管理==>信息管理==>员工信息 中演示完整功能
       </div>
       <!--表单等基本信息(6)-->
       <div style="overflow:hidden;margin:0 auto">
           <div class="div-unit" onclick="goNewPage('/Users/UserInfo', '员工档案')" style="overflow:hidden;float:left;">
               <div class="thumbnail text-center icon-div" style="background-color:#54ADE8;" >
                   <span class="glyphicon glyphicon-lock icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p >用户数量</p>
                       <p >@ViewBag.UserNum</p>
                   </div>
               </div>
           </div>
           <div class="div-unit" onclick="goNewPage('/Record/Employees', '员工档案')" style="overflow:hidden;float:left;margin-left:3%;">
               <div class="thumbnail text-center icon-div" style="background-color:#FF5722">
                   <span class="glyphicon glyphicon-bookmark icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p >员工数量</p>
                       <p >@ViewBag.EmployeeNum</p>
                   </div>
               </div>
           </div>
           <div class="div-unit" onclick="goNewPage('/Record/Customer', '客户信息')" style="overflow:hidden;float:right">
               <div class="thumbnail text-center icon-div" style="background-color:#009688">
                   <span class="glyphicon glyphicon-user icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p >客户数量</p>
                       <p >@ViewBag.CustomersNum</p>
                   </div>
               </div>
           </div>
       </div>
       <div style="overflow:hidden;">
           <div class="div-unit" onclick="goNewPage('/Production/selOrder', '销售订单')" style="overflow:hidden;float:left;">
               <div class="thumbnail text-center icon-div" style="background-color:#5FB878">
                   <span class="glyphicon glyphicon-send icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p >销售订单</p>
                       <p >@ViewBag.SEOrder</p>
                   </div>
               </div>
           </div>
           <div class="div-unit" onclick="goNewPage('/Production/selGather', '销售收款单')" style="overflow:hidden;float:left;margin-left:3%;">
               <div class="thumbnail text-center icon-div" style="background-color:#F7B824">
                   <span class="glyphicon glyphicon-duplicate icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p >收款订单</p>
                       <p >@ViewBag.SEGather</p>
                   </div>
               </div>
           </div>
           <div class="div-unit" onclick="goNewPage('/Record/Inven', '存货信息')" style="overflow:hidden;float:right;">
               <div class="thumbnail text-center icon-div" style="background-color:#2F4056">
                   <span class="glyphicon glyphicon-shopping-cart icon"></span>
               </div>
               <div class="thumbnail text-center font-div">
                   <div class="font">
                       <p>存货数量</p>
                       <p>@ViewBag.InvensNum</p>
                   </div>
               </div>
           </div>
       </div>
       <div class="panel panel-default" style="background-color:#F2F2F2">
           <div class="panel-body">
               <p><span class="label mynotic" data-toggle="tooltip" data-placement="top" title="公告躲这里了哦(⊙o⊙)" onclick="showNotice()"><span class="glyphicon glyphicon-volume-up"></span> 公告</span></p>
               <p></p>
               <h4>项目简介</h4>
               <p><strong style="color:#FF5722">MSD.EMS.Site</strong>&nbsp;其中含有三个主要模块，在具体模块中可以实现相关业务功能。</p>
               <p style="color:#40ACFD">用户登录后可以对员工、客户、存货等信息进行录入、修改和删除操作,并制定生产计划以及完成相关订单的审核。</p>
               <p>在首页中可以概览一些基本信息。</p>
               <p>为了能快速搭建前台页面，项目中借鉴了《asp.Net MVC企业级实战》-邹琼俊著 中示例项目【财务对账系统】中的Html静态页面，
               在此静态页面的基础上，自己动手使用js及jQuery将零散的页面连接起来，并实现动态效果。</p>
               <p>在具体业务界面中使用bootstrap框架及bootstrap-table、datetimepicker组件。ps:【存货分类】中通过后端逻辑代码进行服务器端查询及分页，体验一般，转投使用表格组件。</p>
               <p>后端使用EF6.0（Code First）建立及操作数据库（SQL server）ps:狠下心装SQLserver时，才体会到轻量数据库的好处。想着之后学习学习将数据库迁移到MySQL上。</p>
               <p>整个项目部署在低配版阿里云ECS服务器IIS7.0+Nginx环境中(穷死了⊙o⊙)</p>
               <p style="color:#FF0000">涉及技术：Html、CSS/CSS3、js、jQuery、Ajax、json、ASP.NetMVC5、EF、Bootstrap、SqlServer、IIS+Nginx</p>
               <p style="color:#FF0000">相关工具：vs2015、SqlServer2014、Firefox、Firebug、tackcolor</p>
               <p style="color:#FF0000">注：【密码修改功能仅对管理员用户开放(⊙o⊙)】</p>
               <p>
                   <span class="label" style="color:white;font-size:15px;background-color:#009688"><a href="https://github.com/Lostbookboy?tab=stars">My Stars(Git)</a></span>&nbsp;&nbsp;
                   <span class="label" style="color:white;font-size:15px;background-color:#F7B824"><a href="https://gitee.com/myNewWord/events">个人主页(码云)</a></span>&nbsp;&nbsp;
               </p>
               
           </div>
       </div>
      
       <div style="overflow:hidden">
           <!--系统通知面板-->
           <div class="panel-group" style="width:47%;float:left;">
               <div class="panel panel-default" id="accordionOne" role="tablist" aria-multiselectable="true">
                   <div class="panel-heading" role="tab" id="headingOne" style="background-color:#009688">
                       <h3 class="panel-title" style="font-size:15px;color:white;" role="button" data-toggle="collapse" data-parent="#accordionOne" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span> 系统通知</h3>
                   </div>
                   <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                       <div class="panel-body" style="background-color:#F2F2F2">
                           <p>用户 <span class="label label-info" style="font-size:15px;">@User.Identity.Name</span> 刚刚登陆系统!</p>
                       </div>
                   </div>
               </div>
               <div class="panel panel-default" id="accordionTwo" role="tablist" aria-multiselectable="true">
                   <div class="panel-heading" role="tab" id="headingTwo" style="background-color:#009688">
                       <h3 class="panel-title" style="font-size:15px;color:white;" role="button" data-toggle="collapse" data-parent="#accordionTwo" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 关于我们</h3>
                   </div>
                   <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                       <div class="panel-body" style="background-color:#F2F2F2">
                           <p>这是作者第一个MVC站点</p>
                           <p>基于Asp.NET开发，前端使用bootstrap框架及其组件</p>
                           <p>ORM框架使用EF6.0</p>
                       </div>
                   </div>
               </div>
           </div>
           <!--系统基本参数-->
           <div class="panel panel-default" style="width:52%;float:left;margin-left:1%;">
               <!-- Default panel contents -->
               <div class="panel-heading" style="height:39px;background-color:#009688;font-size:15px;color:white;"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> 系统基本参数</div>
               <!-- Table -->
               <table class="table table-striped table-hover" style="font-size:15px;">
                   <tr>
                       <td style="width:40%">当前版本</td>
                       <td>Version 1.0</td>
                   </tr>
                   <tr>
                       <td>开发作者</td>
                       <td>shouzhen.guo</td>
                   </tr>
                   <tr>
                       <td>网站首页</td>
                       <td>/Home/Index</td>
                   </tr>
                   <tr>
                       <td>服务器环境</td>
                       <td>IIS7.0+Nginx</td>
                   </tr>
                   <tr>
                       <td>数据库版本</td>
                       <td>SQLSever 2014</td>
                   </tr>
                   <tr>
                       <td>当前用户</td>
                       <td>@User.Identity.Name</td>
                   </tr>
               </table>
           </div>
       </div>
   </div>
    <!-- Modal -->
    <div class="modal fade" id="Modal-Notice" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width:400px;">
                <div class="modal-header" style="background-color:#009688;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="color:white;"><span class="glyphicon glyphicon-volume-up"></span> 公告</h4>
                </div>
                <div class="modal-body text-center" style="font-family:Arial, Helvetica, sans-serif;color:#317400;font-size:15px;">
                    <p>折腾了俩月，终于上线了，页面和功能虽然有点简单但也算是达到了预期效果，入门作品，很多细节不完善，将就看吧，后面会持续改进。</p>
                    <p> 生命不息，学习不止，折腾不止~~O(∩_∩)O哈哈~</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default mybtn" data-dismiss="modal" style="margin-right:38%;">我知道啦~</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
